<template>
  <div>
    <van-checkbox-group v-model="copylist">
      <van-swipe-cell v-for="(item, index) in list" :key="index">
        <van-row>
          <van-col span="3" class="car">
            <van-checkbox :name="item"></van-checkbox>
          </van-col>
          <van-col span="21">
            <van-card
              :price="item.price"
              :title="item.name"
  
            >
              <template #footer>
                <van-stepper v-model="item.num" />
              </template>
            </van-card>
          </van-col>
        </van-row>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="remove(index, item)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>

    <van-submit-bar :price="allPrice" button-text="提交订单">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "苹果",
          price: 3,
          num: 1,
        },
        {
          id: 2,
          name: "香蕉",
          price: 4.5,
          num: 1,
        },
        {
          id: 3,
          name: "雪梨",
          price: 10,
          num: 1,
        },
        {
          id: 4,
          name: "红柚",
          price: 4.5,
          num: 1,
        },
        {
          id: 5,
          name: "红提",
          price: 5,
          num: 1,
        },
        {
          id: 6,
          name: "西瓜",
          price: 0.8,
          num: 1,
        },
      ],
      checked: false,
      copylist: [],
    };
  },
  computed: {
    allPrice() {
      let sum = 0;
      this.copylist.forEach((item) => {
        sum += item.price * item.num;
      });
      return sum * 100;
    },
  },
  watch: {
    checked(newVal) {
      if (newVal == true) {
        this.copylist = this.list;
      } else {
        this.copylist = [];
      }
    },
  },
  methods: {
    remove(index, val) {
      this.list.splice(index, 1);
      console.log(val);
      this.copylist.forEach((item, index) => {
        if (item == val) {
          this.copylist.splice(index, 1);
        }
      });
    },
  },
};
</script>
<style lang="scss">
.delete-button {
  height: 100%;
}
.car {
  padding: 50px 0 0 10px;
}
</style>